<template>
  <div>
    <Header />
    <PageHeader title="Blog Page" />
    <div class="box">
    
      <el-card shadow="always" style="flex: 1 1 0%; padding: 20px;">
        <div slot="header" class="clearfix">
          <h2 style="font-size:30px">提问</h2>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title" class="question">
                <el-input v-model="form.title" placeholder="请输入问题标题"/>
              </el-form-item>
            </el-col>
            
            <el-col :span="24">
              <el-form-item label="内容" prop="content">
                <Editor v-model="form.content"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="标签" prop="tags" style="margin-top: 50px;">
                <el-checkbox-group v-model="tags" size="small" @change="getTags()">
                  <el-checkbox v-for="(item,index) in tagOptions" :key="index" :label="item.dictLabel" border></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" style="padding-top:70px;text-align:right">
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-card>
    </div>
    <Footer />
  </div>
</template>
<script>

import '../../../assets/styles/cms/cmsstyle.scss'
import PageHeader from "@/views/cms/components/PageHeader";
import Header from "@/views/cms/components/Header";
import Footer from "@/views/cms/components/Footer";
import Editor from '@/components/Editor';
import { addQuestion } from "@/api/tool/datav/question";
export default {
  components: {
    Header,
    PageHeader,
    Footer,
    Editor
  },
  head() {
    return {
      title: "Dimon | Blog",
    };
  },
  data() {
    return {
       // 表单参数
      form: {
        
      },
      // 表单校验
      rules: {
        title: [
          { required: true, message: "请填写标题", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请填写描述", trigger: "blur" }
        ],
        tags: [
          { required: true, message: "请选择标签", trigger: "blur" }
        ],
      },
      tagOptions:[],//标签字典
      tags:[],//标签

    }
  },
  created() {
    this.getDicts("cms_question_tag").then(response => {
      this.tagOptions = response.data;
    });
  },
  methods: {
        /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {

          this.form.contentText = document.getElementsByClassName("ql-editor")[0].innerText;
            
          addQuestion(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              window.open('/cms/qacenter','_self')
            } else {
              this.msgError(response.msg);
            }
          });
        }
      });
    },
    getTags(){
      this.form.tags = this.tags.join(",")
    }
  },
};
</script>

<style scoped>
.box{

  padding: 100px 300px;

}
::v-deep .editor {
    line-height: normal !important;
    height: 330px;
}
::v-deep .question .el-input__inner{
  height:50px
}
</style>